<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.mynav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
   -webkit-box-pack: center;
      -ms-flex-pack: center;
/* 	  justify-content: center; */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

.mynav li:not(:last-child) {
  margin-right: 20px;
}
.mynav a {
  display: block;
  font-size: 20px;
  color: black;
  text-decoration: none;
  padding: 7px 15px;
} 

.target {
  position: absolute;
  border-bottom: 4px solid transparent;
  z-index: -1;
  -webkit-transform: translateX(-60px);
          transform: translateX(-60px);
}

.mynav a,
.target {
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}
</style>

<title>Insert title here</title>
</head>
<body>
	<nav class="mynav">
	  <ul>
	    <li><a href="">Home</a></li>
	    <li><a href="">About</a></li>
	    <li><a href="">Company</a></li>
	    <li><a href="">Work</a></li>
	    <li><a href="">Clients</a></li>
	    <li><a href="">Contact</a></li>
	  </ul>
	</nav>
	
	
	<span class="target"></span>
	
</body>
<script>
"use strict";

(function () {

  var target = document.querySelector(".target");
  var links = document.querySelectorAll(".mynav a");
  var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

  function mouseenterFunc() {
    if (!this.parentNode.classList.contains("active")) {
      for (var i = 0; i < links.length; i++) {
        if (links[i].parentNode.classList.contains("active")) {
          links[i].parentNode.classList.remove("active");
        }
        links[i].style.opacity = "0.25";
      }

      this.parentNode.classList.add("active");
      this.style.opacity = "1";

      var width = this.getBoundingClientRect().width;
      var height = this.getBoundingClientRect().height;
      var left = this.getBoundingClientRect().left + window.pageXOffset;
      var top = this.getBoundingClientRect().top + window.pageYOffset;
      var color = colors[Math.floor(Math.random() * colors.length)];

      target.style.width = width + "px";
      target.style.height = height + "px";
      target.style.left = left + "px";
      target.style.top = top + "px";
      target.style.borderColor = color;
      target.style.transform = "none";
    }
  }

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function (e) {
      return e.preventDefault();
    });
    links[i].addEventListener("mouseenter", mouseenterFunc);
  }

  function resizeFunc() {
    var active = document.querySelector(".mynav li.active");

    if (active) {
      var left = active.getBoundingClientRect().left + window.pageXOffset;
      var top = active.getBoundingClientRect().top + window.pageYOffset;

      target.style.left = left + "px";
      target.style.top = top + "px";
    }
  }

  window.addEventListener("resize", resizeFunc);
})();</script>
</html>
